import { memo, useState } from "react";
import { SectionRoomWapper } from "./style";
import SectionTabs from "../tab";
import SectionFooter from "../section-footer";

const SectionRoom = memo((props) => {
  const { data, type, width = "25%" } = props;
  console.log(data);

  const initName = Object.keys(data.dest_list || {})[0];
  const [name, setName] = useState(initName);
  const tabs = data.dest_address?.map((item) => item.name);
  let list = [];

  if (type === "discount") {
    list = data.dest_list?.[name];
  } else {
    list = data.list;
  }

  const handleSelectTab = (name) => {
    setName(name);
  };

  return (
    <SectionRoomWapper width={width}>
      <div className="header">
        <h2 className="title">{data.title}</h2>
        {data.subtitle && <div className="subtitle">{data.subtitle}</div>}
      </div>
      <SectionTabs tabs={tabs} selectTab={handleSelectTab}></SectionTabs>
      <ul className="room-list">
        {list &&
          list.slice(0, 8).map((item) => {
            return (
              <li className="item" key={item.id}>
                <div className="cover">
                  <img src={item.picture_url} alt="" />
                </div>
                <div className="inner">
                  <div className="desc" style={{ color: item.verify_info?.text_color || "#39576a" }}>
                    {item.verify_info.messages.join(" · ")}
                  </div>
                  <div className="name">{item.name}</div>
                  <div className="price">￥{item.price}/晚</div>
                  <div className="bottom">
                    {/* <Rating
                      sx={{ fontSize: "12px", color: "#008489", marginRight: "-1px" }}
                      readOnly
                      defaultValue={item?.star_rating ?? 5}
                      precision={0.1}
                    ></Rating> */}
                    {/* <span className="count">{item?.reviews_count}</span>
                    {item?.bottom_info && <span className="extra"> · {item.bottom_info?.content}</span>} */}
                  </div>
                </div>
              </li>
            );
          })}
      </ul>
      <SectionFooter name={data.name}></SectionFooter>
    </SectionRoomWapper>
  );
});

export default SectionRoom;
